<template>
  <div class="shopping-trolley">
    <my-header :back="goBack" title="购物车">
      <span v-if="list.length > 0" class="fast-clear" slot="right" @touchstart="clearAll">一键清空</span>
    </my-header>
    <div class="session-product">
      <template v-for="(item, index) in list">
        <div class="product-item">
          <div class="product-select">
            <checkbox v-model="item.status"></checkbox>
          </div>
          <div class="product-content">
            <img :src="item.img" class="product-detail-img" alt="" />
            <span class="product-detail-title">{{item.name}}</span>
            <span class="product-price">￥{{item.price}}/袋</span>
            <span class="product-count">x{{item.total}}</span>
          </div>
        </div>
        <div class="product-border-divide" v-if="index !== list.length-1"></div>
      </template>
      <div class="empty-message" v-if="list.length <= 0">
        <div>
          <span class="fa fa-inbox icon-address-empty"></span>
          <br>
          <span>您的购物车空空如也</span>
        </div>
      </div>
    </div>
    <div class="shopping-trolley-fixed-layer">
      <div class="total-left">
        <template v-if="list.length > 0">
          <div class="checkbox-wrapper">
            <checkbox v-model="selectAll"></checkbox>
          </div>
          <span class="account-select-all">全选</span>
        </template>
        <span class="total-price">￥{{computedPrice}}</span>
        <span class="total-lbl">总价:</span>
      </div>
      <div class="shopping-account">结算({{select}})</div>
    </div>
  </div>
</template>

<script>
  import utils from '@/common/libs'
  import cartApi from '@/api/cart'
  import MyHeader from '@/components/Header'
  import Checkbox from '@/components/Checkbox'
  export default {
    name: 'ShoppingTrolley',
    components: {
      MyHeader,
      Checkbox
    },
    data: () => ({
      selectAll: false,
      status: false,
      list: []
    }),
    watch: {
      selectAll (newValue, oldValue) {
        this.list.forEach(item => {
          item.status = newValue
        })
      }
    },
    computed: {
      select () {
        return this.list.filter(c => c.status).length
      },
      computedPrice () {
        var result = 0
        this.list.filter(c => c.status).forEach(item => {
          result += item.price * 1.0
        })
        return result.toFixed(2)
      }
    },
    mounted () {
      this.$Central.$emit('loading', true)
      var memberId = 2;
      cartApi.getCartProducts(memberId).then(response => {
        this.$Central.$emit('loading', false)
        if (response.data.code == 0) {
          /**
           * {
            id: 1,
            status: false,
            name: '',
            img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1017494309,1548919751&fm=27&gp=0.jpg',
            price: '18.88',
            total: 1
          }
           */
          this.list.push(...response.data.data.map(item => ({
            status: false,
            name: item.productName,
            img: item.displayImage,
            price: item.price,
            total: item.quantity
          })));
//          this.list = response.data.data
        } else {
          this.$Utils.$toast('获取购物车信息失败，失败信息:' + response.data.message)
        }
      }, err => {
        this.$Utils.$toast('系统错误，获取购物车信息失败!');
        this.$Central.$emit('loading', false)
      })
    },
    methods: {
      clearAll () {
        utils.confirm('确定要清空购物车吗?').then(() => {
          this.$Central.$emit('loading', true)
          var ids = this.list.select(c => c.id);
          cartApi.clearAllProducts({
            ids,
          }).then(response => {
            this.$Central.$emit('loading', false)
            if (response.data.code == 0) {
              this.list.forEach(item => {
                item.status = false
              })
              this.selectAll = false
            } else {
              this.$Utils.$toast('清空购物车失败,错误信息:' + response.data.message)
            }
          }, err => {
            this.$Central.$emit('loading', false)
            this.$Utils.$toast('系统错误，清空购物车失败!');
          })
        })
      },
      goBack () {
        window.history.go(-1);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../assets/css/variable";
  @import "../assets/css/px2rem";

  .fast-clear{
    float: right;
    font-size: 0.7rem;
    margin-right: px2rem(30px);
    color: white;
  }

  .shopping-trolley{
    background-color: #eee;
    float: left;
    width:100%;
    height:auto;
    padding-top: px2rem($header-height);
    .session-product{
      width: 100%;
      height: auto;
      float: left;
    }

    .empty-message{
      display: flex;
      width:100%;
      height: 100%;
      position: absolute;
      left:0;
      top:0;
      text-align: center;
      padding: px2rem($header-height) 0;
      align-items: center;
      justify-content: center;
      color: #c5c5c5;
      box-sizing: border-box;
    }

    .icon-address-empty{
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    .product-detail-img{
      width:px2rem(310px);
      height: px2rem(310px);
      float: left;
      position: absolute;
      left: 0;
      top:px2rem(10px);
    }

    .product-detail-title{
      color: #5b5b5b;
      display: block;
      width:100%;
      line-height: 0.9rem;
      font-size: 0.8rem;
      float: left;
    }

    .product-item{
      width:100%;
      box-sizing: border-box;
      padding: px2rem(15px);
      height: px2rem(350px);
    }

    .product-select{
      height: 100%;
      width:15%;
      float: left;
      text-align: center;
      /*line-height: px2rem(350px);*/
    }
    .product-content{
      width:85%;
      box-sizing: border-box;
      padding-left: px2rem(355px);
      height: 100%;
      float: left;
      padding-top: px2rem(30px);
      position: relative;
    }

    .product-price{
      color: $theme-color;
      font-size: 0.85rem;
      margin-top: px2rem(30px);
      display: inline-block;
    }
    .product-count{
      right: px2rem(20px);
      bottom: px2rem(20px);
      position: absolute;
      color: #666;
      font-size: 0.9rem;
    }

    .product-border-divide{
      width:100%;
      height: px2rem(60px);
      background: white;
      clear: both;
      float: left;
      border: 1px solid #ccc;
      border-left: none;
      border-right: none;
    }

    .shopping-trolley-fixed-layer{
      position: fixed;
      bottom:0;
      left:0;
      z-index: 100;
      width:100%;
      border-top: 1px solid #ccc;
      height: px2rem(179px);

      .total-left{
        float: left;
        width:75%;
        height: 100%;
        display: block;
      }

      .checkbox-wrapper{
        width:20%;
        height: 100%;
        display: block;
        float: left;
      }

      .account-select-all{
        font-size: 0.85rem;
        color: #5b5b5b;
        line-height: px2rem(179px);
      }

      .total-lbl{
        @extend .account-select-all;
        float: right;
        margin-right: px2rem(30px);
      }

      .total-price{
        line-height: px2rem(179px);
        margin-right: px2rem(40px);
        color: $theme-color;
        float: right;
        font-size: 0.65rem;
      }

      .shopping-account{
        float: right;
        width: 25%;
        height: px2rem(179px);
        color: white;
        background-color: $theme-color-deep;
        line-height: px2rem(179px);
        text-align: center;
        font-size: 0.85rem;
      }
    }

  }

</style>
